<template>
	<view>
		<Header :isBack="true">
			<block slot="content">{{title}}</block>
		</Header>

		<view class="content" v-if="isLoaded">
			<view class="realname">
				<view class="realname-text">
					<text class="realname-text-title">工作城市</text>
					<!-- <text class="realname-text-name" v-if="userInfo.jobarea">{{userInfo.jobarea}}</text>
					<text class="realname-text-name" v-else>未知</text> -->
					<Region :defaultValue="userInfo.jobarea" @change="onChangeRegion"></Region>
				</view>

				<!-- <image class="realname-img" :src="right" @tap="choseCity"></image> -->
			</view>

			<view class="realname" @tap="choseWork">
				<view class="realname-text">
					<text class="realname-text-title">工种</text>
					<text class="realname-text-name" v-if="userInfo.jobsort">{{userInfo.jobsort}}</text>
					<text class="realname-text-name" v-else>未知</text>

				</view>

				<image class="realname-img" :src="right"></image>
			</view>
			<!-- <view class="realname">
				<view class="realname-text">
					<text class="realname-text-title">期望薪资</text>
					<text class="realname-text-name" v-if="userInfo.salary">{{userInfo.salary}}</text>
					<text class="realname-text-name" v-else>未知</text>
				</view>

				<image class="realname-img" :src="right" @tap="choseSalary"></image>
			</view> -->

			<view class="buttons">
				<view class="btn" @tap="goIndex">
					返回主页
				</view>
			</view>
		</view>

		<Works ref='Works' :pickerSize="pickerSize" :pickerUrl="pickerUrl"></Works>
		<!-- 底部菜单 -->
		<BottomTabbar :selected="3"></BottomTabbar>
	</view>

</template>

<script>
	import BottomTabbar from '@/components/bottom-tabbar/bottom-tabbar.vue';
	import Region from '@/components/region/region.vue';
	import Works from '@/pages2/components/works/works.vue';
	export default {
		data() {
			return {
				title: '工作信息',
				isLoaded: false,
				right: '/static/images/right.png',

				userInfo: {
					jobarea: '',
					jobsort: '',
					salary: ''
				},

				pickerSize: 3, //级别
				pickerUrl: 'https://test.hnliandesy.com/api/getPosByPid', //地址
			}
		},
		components: {
			BottomTabbar,
			Region,
			Works
		},

		// 页面生命周期，下拉刷新后触发
		onPullDownRefresh() {
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}
			this.loadData();
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 600)
		},

		computed: {

		},

		async onLoad() {

			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}

			uni.showLoading({
				title: '加载中...'
			});
			this.loadData();
			setTimeout(() => {
				this.isLoaded = true;
				uni.hideLoading();
			}, 600)

			uni.$on('changeCity', (option) => {
				this.userInfo.jobarea = option.jobarea;
			})

			uni.$on('changeWork', (option) => {
				this.userInfo.jobsort = option.work;
			})

			uni.$on('changeSalary', (option) => {
				this.userInfo.salary = option.salary;
			})
		},
		methods: {
			async loadData() {
				let token = uni.getStorageSync('token');
				let url = '/getUserInfo';
				let res = await this.$myRequest({
					url: url,
					data: {
						cate: 1,
						token: token
					},
					methods: 'post'
				})

				let info = res.data.data;
				if (info.jobarea1) {
					this.userInfo.jobarea = info.jobarea11;
				}
				if (info.jobsort1) {
					this.userInfo.jobsort = info.jobsort1;
				}

				if (info.expectedsalary) {
					this.userInfo.salary = info.expectedsalary;
				}

			},

			async choseCity() {
				uni.navigateTo({
					url: '/pages2/pages/get-city/get-city'
				})
			},

			async choseWork() {
				this.$refs.Works.show()
			},

			async choseSalary() {
				uni.navigateTo({
					url: '/pages2/pages/salary/salary?salary=' + this.userInfo.salary
				})
			},

			onChangeRegion(region) {
				let id = 0;
				let area = '';
				if (region[2].id > 0) {
					id = region[2].id;
					area = [region[0].name, region[1].name, region[2].name];
				} else {
					id = region[1].id;
					area = [region[0].name, region[1].name];
				}
				this.userInfo.jobarea = area;
				this.choseArea(id)
			},

			async choseArea(id) {
				let token = uni.getStorageSync('token');
				let dataObj = {
					token: token,
					area: id
				};
				let res = await this.$myRequest({
					url: '/jobarea',
					data: dataObj,
					methods: 'post'
				})

				uni.$emit('changeStatus');
				this.$api.msg(res.data.msg, 1000);

			},
			
			async goIndex() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
		font-size: $font-base;
	}
</style>
<style lang='scss' scoped>
	.content {
		font-size: $font-base;
		background-color: #fff;

		// #ifdef APP-PLUS
		padding: 168rpx 48rpx 120rpx;
		// #endif

		// #ifdef H5
		padding: 116rpx 48rpx 120rpx;
		// #endif
		
		// #ifdef MP-WEIXIN
		padding: 168rpx 48rpx 120rpx;
		// #endif

		.headimg {
			width: 100%;
			height: 170rpx;
			line-height: 170rpx;
			position: relative;
			border-bottom: 1px solid #f3f3f6;
			display: flex;
			justify-content: space-between;

			.headimg-img {
				height: 170rpx;
				width: 170rpx;
				line-height: 170rpx;
				vertical-align: center;
			}
		}

		.realname {
			width: 100%;
			height: 170rpx;
			/* padding: 31rpx 44rpx; */
			/* line-height: 170rpx; */
			position: relative;
			border-bottom: 1px solid #f3f3f6;
			display: flex;
			justify-content: space-between;

			.realname-text {
				display: flex;
				flex-direction: column;
				align-items: left;

				height: 170rpx;
				padding-top: 29rpx;

				.realname-text-title,
				.realname-text-name {
					height: 56rpx;
					line-height: 56rpx;
				}

				.realname-text-title {
					color: #808080
				}
			}

			.realname-img {
				height: 170rpx;
				width: 50rpx;
				display: inline-block;
				padding: 75rpx 19rpx;

			}
		}

		.test {
			text-align: center;
			padding: 10px 0;
		}

		uni-button[type=primary] {
			background-color: #f3431a;
			font-size: $font-base;
		}

		.popup-btn {
			margin-top: 10px;
			background-color: #f3431a;
			font-size: $font-base;
			color: #fff;
		}

		.buttons {
			width: 100%;
			font-size: $font-base;
			padding-top: 50upx;
		}

		.btn {
			background-color: $base-color;
			color: #fff;
			height:90upx;
			display: flex;
			align-items: center;
			justify-content: center;
			letter-spacing: 6upx;
			border-radius: 10upx;
		}
	}
</style>
